import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import NotFound from '../views/NotFoundView.vue'
import FooterCom from "@/components/FooterCom.vue";

import LoginView from '@/views/LoginView/index.vue'

import RegisterView from '@/views/RegisterView/index.vue'
import ChildStep1 from '@/views/RegisterView/ChildStep1.vue'
import ChildStep2 from '@/views/RegisterView/ChildStep2.vue'
import ChildStep3 from '@/views/RegisterView/ChildStep3.vue'

import UserView from '@/views/UserView.vue'

import DetailsView from '@/views/DetailsView.vue'

import Cart from '@/views/CartView.vue'
import { Notify } from 'vant';

import SearchView from '@/views/SearchView/index.vue'

import AddressView from '@/views/AddressView.vue'

import OrderView from '@/views/OrderView.vue'

const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      components: {
        default: HomeView,
        footer: FooterCom
      }
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/AboutView.vue')
    },
    {
      path: '/search',
      name: 'search',
      component: SearchView
    },
    {
      path: '/order',
      name: 'order',
      component: OrderView
    },
    {
      path: '/address',
      name: 'address',
      component: AddressView
    },
    {
      path: '/details/:id',
      name: 'details',
      component: DetailsView
    },
    {
      path: '/cart',
      name: 'cart',
      meta: {
        // 该页面需要检查登录状态
        needCheckLogin: false
      },
      component: Cart
    },
    {
      path: '/user',
      name: 'user',
      meta: {
        // 该页面需要检查登录状态
        needCheckLogin: false
      },
      component: UserView
    },
    {
      path: '/login',
      name: 'login',
      component: LoginView
    },
    {
      path: '/register',
      name: 'register',
      component: RegisterView,
      redirect: {
        name: 'step1'
      },
      children: [{
        path: 'step1',
        name: 'step1',
        component: ChildStep1
      },
      {
        path: 'step2',
        name: 'step2',
        component: ChildStep2
      },
      {
        path: 'step3',
        name: 'step3',
        component: ChildStep3
      },
      ]
    },
    { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
  ]
})

router.beforeEach((to, from) => {
  // to.matched[0],嵌套路由中用于匹配父级路由（子路由全部通过验证）
  if (!to.matched[0].meta.needCheckLogin) {
    return true
  } else {
    const token = localStorage.getItem('token')
    if (!token) {
      Notify({
        type: 'warning',
        message: '请登录后访问',
        onClose: () => {
          // 如何设置
          if (!token) {
            return {
              name: 'login'
            }
          }
        }
      });
    } else {
      return true
    }
  }
})

export default router
